// pages/dzk/dzk.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var _this = this;
    var query = wx.createSelectorQuery();
    query.select('#myCanvas').boundingClientRect();
    query.exec(function (res) {
      _this.dzkW = res[0]["width"];
      _this.dzkH = res[0]["height"];

      _this.initDzk();
    })

    wx.onAccelerometerChange(function (e) {
      console.log(e.x)
      console.log(e.y)
      console.log(e.z)
      if (e.x > 1 && e.y > 1) {
        wx.showToast({
          title: '摇一摇成功',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },

  initDzk:function(){
    var _this = this;
    var ctx = wx.createCanvasContext("myCanvas", this);

    this.ctx = ctx;
    this.ctx.fillStyle = 'rgba(0,0,0,0)';
    this.ctx.fillRect(0, 0, 1000, 750);

    this.gameStatus = 'start';

    this.player = {
      width: 180,
      height: 20,
      color: "#1E90FF",
      positionX: (this.dzkW - 180) / 2,
      speed: 10,
      dir: 'none'
    }

    this.ballInitPosition = {
      x: (this.dzkW - 10) / 2 + 5,
      y: this.dzkH * 0.8 - 10
    }

    this.ball = {
      r: 10,
      color: "yellow",
      xspeed: 10,
      yspeed: 10,
      positionX: this.ballInitPosition.x,
      positionY: this.ballInitPosition.y
    }

    this.map = [
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1],
      [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1],
      [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0],
      [0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0],
      [0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0],
      [0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0],
      [0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0],
      [0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0],
      [0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 0],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
      [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0],
      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0]
    ];

    this.block = {
      blockWidth: 15,
      blockHeight: 10,
      blockColor: "#dec08b",
      blockCol: this.map[0].length,
      blockRow: this.map.length,
      initLeft: 20,
      initHeight: 20,
      initWDis: 9,
      initHDis: 5
    }
    this.blockArr = [];

    this.map.forEach(function (lv1, i) {
      lv1.forEach(function (lv2, j) {
        if (lv2 == 1) {
          _this.blockArr.push({
            x: _this.block.initLeft + j * _this.block.blockWidth + j * _this.block.initWDis,
            y: _this.block.initHeight + i * _this.block.blockHeight + i * _this.block.initHDis,
            ax: _this.block.initLeft + j * _this.block.blockWidth + j * _this.block.initWDis + _this.block.blockWidth,
            ay: _this.block.initHeight + i * _this.block.blockHeight + i * _this.block.initHDis + _this.block.blockHeight,
            col: j,
            row: i
          })
        }
      })
    })

    this.createBlock();
    this.createBall();
    this.createPlayer();

    this.ctx.draw();

    this.gameAction();
  },

  createBall : function () {
    var _this = this;
    _this.ctx.beginPath();
    _this.ctx.fillStyle = _this.ball.color;
    _this.ctx.arc(_this.ball.positionX, _this.ball.positionY, _this.ball.r, 0, Math.PI * 2);
    _this.ctx.fill();
    _this.ctx.closePath();
  },

  createPlayer : function () {
    var _this = this;
    _this.ctx.beginPath();
    _this.ctx.fillStyle = _this.player.color;
    _this.ctx.fillRect(_this.player.positionX, _this.dzkH * 0.8, _this.player.width, _this.player.height)
    _this.ctx.closePath();
  },

  createBlock:function(){
    var _this = this;
    _this.ctx.beginPath();
    _this.ctx.fillStyle = _this.block.blockColor;
    _this.blockArr.forEach(function (v, i) {
      _this.ctx.rect(v.x, v.y, _this.block.blockWidth, _this.block.blockHeight);
    })
    _this.ctx.fill();
    _this.ctx.closePath();
  },

  collisionDetection : function () {
    var _this = this,
      px = _this.ball.positionX,
      py = _this.ball.positionY,
      xs = _this.ball.xspeed,
      ys = _this.ball.yspeed,
      r = _this.ball.r,
      dw = _this.dzkW,
      dh = _this.dzkH,

      pT = py - r + 2,
      pR = px + r - 2,
      pB = py + r - 2,
      pL = px - r + 2;

    // 游戏界面碰撞检测
    if (pT <= 0) {
      _this.ball.yspeed = -_this.ball.yspeed
    }
    if (pL <= 0) {
      _this.ball.xspeed = -_this.ball.xspeed;
    }
    if (pR >= dw) {
      _this.ball.xspeed = -_this.ball.xspeed
    }
    if (pB >= dh) {
      _this.ball.yspeed = -_this.ball.yspeed
    }

    // player 碰撞检测
    if ((py >= _this.ballInitPosition.y && py <= _this.ballInitPosition.y + Math.abs(ys)) && (px >= _this.player.positionX && px <= _this.player.positionX + _this.player.width)) {
      _this.ball.yspeed = - Math.abs(_this.ball.yspeed);  // 避免使用相反数陷入死循环
    }

    // 砖块 碰撞检测
    _this.blockArr.forEach(function (v, i) {
      // 从左右侧碰撞
      if (((pL <= v.ax && pL >= v.ax - Math.abs(xs)) || (pR <= v.x + Math.abs(xs) && pR >= v.x)) && ((pT >= v.y && pT <= v.ay) || (pB >= v.y && pB <= v.ay))) {
        _this.ball.xspeed = -_this.ball.xspeed

        delete _this.blockArr[i]
      }

      // 从上下侧碰撞
      if (((pL <= v.ax && pL >= v.x) || (pR >= v.x && pR <= v.ax)) && ((pT <= v.ay && pT >= v.ay - Math.abs(ys)) || (pB >= v.y && pB <= v.y + Math.abs(ys)))) {


        _this.ball.yspeed = -_this.ball.yspeed

        delete _this.blockArr[i]
      }
    })

    _this.ball.positionX += _this.ball.xspeed;
    _this.ball.positionY += _this.ball.yspeed;
  },

  gameAction : function(){
    var _this = this;
    setInterval(function () {
      _this.ctx.clearRect(0, 0, _this.dzkW, _this.dzkH)

      // if (_this.player.dir == 'left') {
      //   if (_this.player.positionX - _this.player.speed > 0) {
      //     _this.player.positionX = _this.player.positionX - _this.player.speed;
      //   } else {
      //     _this.player.positionX = 0;
      //   }
      // } else if (_this.player.dir == 'right') {
      //   if (_this.player.positionX + _this.player.width + _this.player.speed < _this.dzk.width) {
      //     _this.player.positionX = _this.player.positionX + _this.player.speed;
      //   } else {
      //     _this.player.positionX = _this.dzk.width - _this.player.width;
      //   }
      // }

      if (_this.gameStatus == 'wait') {
        _this.ball.positionX = _this.player.positionX + _this.player.width / 2
      }

      if (_this.gameStatus == 'start') {
        _this.collisionDetection();
      }

      _this.createBlock();
      _this.createPlayer();
      _this.createBall();

      _this.ctx.draw();

    }, 1000 / 80)
  }


})